<div ng-include="'components/navbar/navbar-inner.html'"></div>
<!-- Content Section -->
<section class="content">
    <div class="container dash">
        <div class="row">
            <div class="col-md-6 my-dashboard">
                <h3>My Dashboard</h3>
                <div class="my-profile">
                    <div class="profile-pic"><img src="images/profile-pic-default.png"></div>
					<ul class="nav dashboard-nav">
					<li class="profile-identity info-red active" ng-click="tabSelected = 'profile'">
						<span class="profile-name"><strong>{{dashVault.profile.profile.user.firstname}}&nbsp;{{dashVault.profile.profile.user.lastname}}</strong><br /></span>
                        <a class="edit-profile-identity"></a>
					</li>
					<li class="posted-topics" ng-click="tabSelected = 'postedTopic'">
						<span>Posted Topics</span>
                        <span class="count">{{dashVault.profile.profile.votes}}</span>    
					</li>
					<li class="friends" ng-click="tabSelected = 'friends'">
						<span>Friends</span>
                        <span class="count">{{dashVault.profile.profile.friends}}</span>
                        <a class="friend-search"></a>
					</li>
					<li class="favourites">
						<span>Favourites</span>
                        <span class="count">{{dashVault.profile.profile.favourites}}</span>
					</li>
					<li class="post-question" ng-click="tabSelected = 'postQuestion'">
						<span>Post a question</span>
					</li>
					</ul>
                    

                  

                   
                </div>

                <div class="my-infographic clearfix">
                    <progress-arc size=132 category="Accepted" count="dashVault.profile.decisions.decisionAccepted" complete="dashVault.acceptedRatio" background="#eee" stroke="#23a0da"></progress-arc>
                    <progress-arc size=132 category="Rejected" count="dashVault.profile.decisions.decisionRejected" complete="dashVault.rejectedRatio" background="#eee" stroke="#eb1f27"></progress-arc>
                    <progress-arc size=132 category="Pending" count="dashVault.profile.decisions.decisionPending" complete="dashVault.pendingRatio" background="#eee" stroke="#EB8A1C"></progress-arc>
                </div>

                <div class="clearfix">...</div>
                <br>
				
            </div>
			
			<!-- Your profile -->
			<div class="col-md-6" ng-show="tabSelected == 'profile'">
				<h3>Your profile</h3>
				<div class="personal-info profile-section">
				<form>
					<fieldset class="first-name">
						<legend>Personal information: <a class="info-edit-icon"></a></legend>
						<label>First name:</label><input type="text" name="firstname" value="{{dashVault.profile.profile.user.firstname}}"><br />
						<label>Last name:</label><input type="text" name="lastname" value="{{dashVault.profile.profile.user.lastname}}"><br />
						<label>Email:</label><input type="text" name="email" value="{{dashVault.email}}"><br />
						<input type="submit" value="Submit">
					</fieldset>
				<form>
				</div>
			</div>
			<!-- Your profile Ends -->
			
			<!-- Post a question -->
			<div class="col-md-6 post-question" ng-show="tabSelected == 'postQuestion'">
			<h3>Ask a Question</h3>
                <form role="form">
                    <div class="form-group">
                        <label for="newQuestion">Ask a Question</label>
                        <textarea rows="3" ng-model="dashVault.newQuestion" class="form-control" id="newQuestion" placeholder="Confused or want to take decisions? You can Simply Decide by posting questions"></textarea>
                    </div>  
                    <div class="list-group">
                        <label ng-show="dashVault.answers.length > 0">Your Answers</label>
                        <div href="#" class="list-group-item" ng-repeat="answer in dashVault.answers">
                            <div class="btn-group btn-group-xs pull-right">
                                <button type="button" ng-click="removeAnswer($index)" class="btn">
                                    <span class="glyphicon glyphicon-remove"></span>
                                </button>
                            </div>
                            <h4 class="list-group-item-heading">Answer {{$index +1}}</h4>                            
                            <div class="list-group-item-text" ng-bind-html="answer"></div>                            
                        </div>
                    </div>
                    <button ng-show="dashVault.answers.length > 1" type="button" class="btn btn-default" ng-click="postQuestion()">Add attributes and post</button>
                    <div class="form-group">
                        <label>Add Answers</label>
                        <text-angular-toolbar ta-toolbar="[['undo','redo','insertLink'],['bold','italics']]" name="toolbar"></text-angular-toolbar>
                        <text-angular ng-model="dashVault.newAnswer" ta-target-toolbars='toolbar' name="1"></text-angular>
                    </div>
                    <button type="button" class="btn btn-default" ng-click="addAnswer()">Add Answer</button>
                </form>
			</div>
			<!-- Post a question ends -->
			
			
			<!-- posted topic section -->
            <div class="col-md-6 my-data" ng-show="tabSelected == 'postedTopic'">

                <p class="last-signed" ng-hide="true">You last signed in May 2014</p>
                <table class="info-table red">
                    <thead><tr><th class="latest">Your Latest Posts</th><th><a class="view-more">view more</a></th></tr></thead>
                    <tbody>
                        <tr ng-repeat="post in dashVault.profile.posts.recent_questions| limitTo: 5">
                            <td>
                                <a ui-sref="question({id: post.question_id})">
                                    {{post.question}}
                                </a>
                            </td>
                            <td>
                                <span class="views">160</span>
                                <span class="decisions">80</span>
                            </td>
                        </tr>                        
                    </tbody>
                </table>

                <table class="info-table blue">
                    <thead><tr><th>Your Decisions/Votes</th><th><a class="view-more">view more</a></th></tr></thead>
                    <tbody>
                        <tr ng-repeat="post in dashVault.profile.posts.recent_votes| limitTo : 5"><td>{{post.question}}</td><td><span class="views">160</span><span class="decisions">80</span></td></tr>                        
                    </tbody>
                </table>
            </div>
			<!-- Posted Topic section Ends -->
			
			<!-- Friend data -->
			<div class="col-md-6 friend-data" ng-controller="FriendController" ng-show="tabSelected == 'friends'">
			<h3>Your Friends</h3>
				<accordion>
					<accordion-group heading="Your friends in Simply Decide">
                      <p ng-show="!friendsData.length">You have not added any friends yet.</p>
					  <ul class="myFriends">
                        <li ng-repeat="friend in friendsData"><span class="name">{{friend.record.firstname}} {{friend.record.lastname}}</li>
                      </ul>
					</accordion-group>
					<accordion-group heading="Search friends in Simply Decide">
					  <div class="search-friend">
					  <h4>Enter a name and search</h4>
						<form>
							<input class="search-friend" ng-model="friendSearchKeyword">
							<button ng-click="searchFriend(friendSearchKeyword)">Search</button>
						</form>
						<div class="search-friend-results">
							<p ng-show="!friendSearchResult.users.length && isFriendSearched">Sorry, we couldnt find a user for your search. Kindly refine your search</p>
							
							<table class="friend-search-result">
							<tr ng-repeat="item in friendSearchResult.users">
								<td>{{item.firstname}} {{item.lastname}}</td><td><span class="email">{{item.email}}</span></td>
                                <td><a class="btn btn-info btn-sm" ng-show="item.request_status == null" ng-click="addFriend(item.customer_id)">Add friend</a>
                                    <a class="btn btn-default btn-sm" ng-disabled="true" ng-show="item.request_status == 0 && item.customer_id == item.to_friend_id">Request Sent</a>
                                    <a class="btn btn-info btn-sm" ng-show="item.request_status == 0 && item.customer_id != item.to_friend_id" ng-click="approveFriend(item.customer_id)">Approve</a>
                                    <a class="btn btn-primary btn-sm" ng-show="item.request_status == 0 && item.customer_id != item.to_friend_id" ng-click="rejectFriend(item.customer_id)">Reject </a>
                                    <a class="btn btn-success btn-sm" ng-show="item.request_status == 1">Your Friend</a>
                                    
                                    <a class="btn btn-primary btn-sm" ng-show="item.request_status == 1" ng-click="unFriend(item.customer_id)"> Unfriend</a>
                                </td>
							</tr>
							</table>
							
						</div>
					  </div>
					</accordion-group>
					<accordion-group heading="Find friends from Facebook">
					  This content is straight in the template.
					</accordion-group>
				</accordion>
			</div>
			<!-- Friend data Ends -->
        </div>
    </div>
</section>


